import React,{Component} from 'react';
import {connect} from 'react-redux';
import {createStore} from 'redux';
import mapStateToProps from '../value/mapStateToProps';
import {addToCart,addToCard,loginState,userLogin,changeUseName} from '../action/counter';
  class Cart extends Component{
    constructor(props) {
        super(props);
    }
    addtoCarts(){
        
     }
    render(){ 
        var output = [];
       
       if(this.props.user.loginState){
           var cls=[];
           $.ajax({
            type:'get',
            url:`http://10.31.160.25:3000/users/data/${this.props.user.id}`,
            async:false
           }).then(res=>{
               console.log(res)
               if(res.interest.length==0&&this.props.product.carts){
                    cls =[...this.props.product.carts]
                    fetch(`http://10.31.160.25:3000/users/data/${this.props.user.id}`,{
                        method: "put",
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        },
                        body:"interest="+[...this.props.product.carts]
                    }).then(res=>{
                        this.props.product.carts=[] })
                 }else{
                     if(this.props.product.carts)
                     {
                         cls =[... res.interest,...this.props.product.carts];
                         fetch(`http://10.31.160.25:3000/users/data/${this.props.user.id}`,{
                            method: "put",
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded'
                            },
                            body:"interest="+cls
                        }).then(res=>{
                            this.props.product.carts=[] })
                    }
                     else{cls=res.interest}
                     console.log(cls)
                 }
           })
           

            var numb=[]
            for(let i=0;i<cls.length;i++){
                var n=1;
                for(let j=i+1;j<cls.length;j++){
                    if(cls[i]==cls[j]){
                        cls.splice(j,1);
                        --j
                        n++
                    }
                }
            numb.push(n)
            }
        

            var total=0;
            for(let i=0;i<cls.length;i++){
                $.ajax({
                    type:'get',
                    url:`http://10.31.160.25:3000/product/data/${cls[i]}`,
                    async:false
                }).then(res=>{
                    output.push(
                        <tr key={i}>
                            <td style={{width:270+'px'}}><img src={res.src} width="100%" height="165px" className="image"/></td>
                        <td>
                            <div><strong>{res.title}</strong>
                            </div>
                        </td>
                        <td>
                        
                            {numb[i]}
                            
                        </td>
                        <td>&yen;{res.price}</td>
                        <td>&yen;{Number(numb[i])*res.price}</td>
                    </tr>
                )
                total+=Number(numb[i])*res.price;
                })
            }
            var IscartList=(
                <table className="table invoice-total">
                <tbody>
                    <tr>
                        <td><strong>总计</strong>
                        </td>
                        <td  style={{color:"red"}}>&yen;{total}</td>
                    </tr>
                </tbody>
                </table>
            )       
        }   
        
        var style={
            goodsList:{
                marginTop:"20px"
            }
        }
        
        return(
            <div>
                <div className="table-responsive m-t">
                <table className="table invoice-table" style={style.goodsList}>
                    <thead>
                        <tr>
                            <td>产品列表</td>
                            <td>产品名称</td>
                            <td>数量</td>
                            <td>单价</td>
                            <td>总价</td>
                        </tr>
                    </thead>
                    <tbody>
                        {output}
                    </tbody>
                    </table>
                </div>
                {IscartList}
                <div className="text-right">
                    <button className="btn btn-primary"><i className="fa fa-dollar"></i> 去付款</button>
                </div>
                <div className="well m-t"><strong>注意：</strong> 请在30日内完成付款，否则订单会自动取消。
                </div>
            </div>
        )
    }
}
 export default connect(mapStateToProps,{addToCart,addToCard,loginState,userLogin,changeUseName})(Cart)